<template>
  <div>

	<myheader></myheader>


	<br /><br />

	<Breadcrumb :datas="datas"></Breadcrumb>

	<section  class="featured-block text-center">
		<div class="container">

			商品名称:<input type="text" v-model="name" /> <br /><br />
			商品分类:<Select v-model="category" :datas="param" ></Select>

			<br /><br />
			商品描述:<textarea rows='5' v-autosize v-wordcount="30" v-model="desc"></textarea> <br /><br />

			商品演示视频 <input type="file" @change="upload"  />

			<video width="300" height="200" :src="src" controls="controls" ></video>

			<br /><br />

			颜色:<input type="text" v-model="color">

			<br /><br />

			薄厚:<input type="text" v-model="season">

			<br /><br />

			<Button color="yellow" @click="submit">新增商品</Button>

			

			
			
		</div>
	</section>
	
	
	<myfooter></myfooter>
	
    
  </div>
  
</template>


 
<script>

//组件包含
import myheader from './myheader.vue';
import myfooter from './myfooter.vue';

export default {
  data () {
    return {
	  //面包屑导航
	  datas:[{title:'首页',route:{name:'index'}},{title:'添加商品'}],
	  msg: "这是一个变量",
	  name:'',
	  desc:'',
	  param:['服饰','汽车','食物'],
	  category:'服饰',
	  //原始路径
	  src:'',
	  mysrc:'',
	  uptoken:'',
	  color:'',
	  season:'',
	  //进度展示
	  imgload:'',
	  //记录商品id
	  cate:{}
    };
  },
  //定义组件
  components:{
	'myheader':myheader,
	'myfooter':myfooter
  },
  mounted:function(){


  	//调用商品分类信息接口
  	this.get_cateinfo();

  
},
methods:{


  	//获取商品分类信息
  	get_cateinfo:function(){


  		//发送请求
		this.axios.get('http://localhost:8000/categoryinfo/').then((result) =>{

			console.log(result.data);
			
			var catebox = [];

			//循环赋值
			for(var i = 0,l = result.data.length;i<l;i++){

				catebox.push(result.data[i]['cname']);

				//反向赋值
				this.cate[result.data[i]['cname']] = result.data[i]['id'];
			}

			console.log(catebox);

			this.param = catebox;


		});

  	},
  	//提交商品添加
  	submit:function(){


  		console.log(this.category);
  		console.log(this.cate);

		// 获取用户id
		var uid = localStorage.getItem('uid');

  		//将变量转换为字符串
		var param_str = {'color':this.color,'season':this.season};
		  
  		console.log(param_str);
  		//强转 {'color':'红色'}
  		param_str = JSON.stringify(param_str);
  		console.log(param_str);

  		//发送请求
		this.axios.get('http://localhost:8000/addgoods/',{params:{name:this.name,img:'touxiang.png',video:this.mysrc,desc:this.desc,param:param_str,cid:this.cate[this.category],price:10,uid:uid}}).then((result) =>{

			console.log(result);

			this.$Message(result.data.message);

		});


  	},
  	//上传七牛云
  	upload_qiniu:function(e){

  		//声明文件对象
		let file = e.target.files[0];
		//声明参数类型
		let param = new FormData();
		//添加文件
		param.append('file',file);
		param.append('token',this.uptoken);

		//定制axios请求
		const axios_qiniu = this.axios.create({withCredentials:false});

		axios_qiniu({

			method:'POST',
			url:'http://up-z1.qiniu.com/',
			data:param,
			timeout:30000,
			//上传进度捕捉方法 下载进度:onDownload
			onUploadProgress:(e) => {

				//计算进度
				var complete = (e.loaded / e.total);

				//判断
				if(complete < 1){

					this.imgload = ( complete * 100 ).toFixed(2) + '%';

				}

			}

		}).then(result =>{

			console.log(result);
			//请求结束设置为100%
			this.imgload = '100%';

		});


  	},
  	//获取令牌方法
  	get_token(){

  		//发送请求
		this.axios.get('http://localhost:8000/uptoken/').then((result) =>{

			console.log(result);
			//动态赋值
			this.uptoken = result.data.uptoken;

		});

  	},
	//上传方法
	upload:function(e){

		//声明文件对象
		let file = e.target.files[0];
		//声明参数类型
		let param = new FormData();
		//添加文件
		param.append('file',file);
		//声明上传文件头部
		let config = {'Content-Type':'multipart/form-data'};

		//发送请求
		this.axios.post('http://localhost:8000/uploadfile/',param,config).then((result) =>{

			console.log(result);
			//动态赋值
			this.src = 'http://localhost:8000/static/upload/'+result.data.filename;
			this.mysrc = result.data.filename;

		});

	}
     
	}
}


</script>
 
<style>



</style>